<template>
  <div class="box">
    <div v-for ="(item,index) in list" :key="index" class="card" :class="index===active ? 'active':''" @click="change(index)">
    <img :src="item" class="photo">
    <h2 class="test" v-show="index===active">{{ index }}</h2>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {imgList} from '@/config/index'
const list = ref(imgList)
const active = ref('')
const change = (index) =>{
  active.value = index
}
</script>

<style scoped>
.box{
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
}
.photo{
  height: 100%;
  width: 100%;
  border-radius:20px;
  filter:brightness(0.5);
  transition: all 700ms;
}
.photo:hover{
  filter:brightness(1);
}

.card{
  height: 90%;
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  transition: all 700ms;
  position: relative;
}
.active{
  flex: 6;
}
.active .photo{
  filter:brightness(1);
}
.test{
position: absolute;
bottom: 10px;
left: 30px;
color: aliceblue;
}
</style>